<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>兑换商城</title>
  <link href="./static/css/app.css" rel="stylesheet">
</head>

<body>
  <div id="app" class="bg">
    <div  id="top" class="top">
      <div  class="dou"><i  class="icon"></i> <span  class="text">0</span> <i  class="add"></i></div>
      <div class="account">
        <div class="dui router-link-exact-active router-link-active"><a href="shop.html"><i class="icon"></i>兑换商城</a>
        </div>
        <div class="me"><a href="me.html"><i class="icon"></i>我的</a>
        </div>
      </div>
      <div  class="crash">
        <div class="malert">
          <div class="dialog-cover" style="display: none;"></div>
          <div class="alertC" style="display: none;">
            <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
              <div class="content">
                <div class="text">
                  <div class="dous dous20">20</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous50">50</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous300">300</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous1000">1000</div> <button class="btn"></button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="continer">
      <div class="gift">
        <Top :money="amount"></Top>
        <div class="succCard">
          <div class="waper">
            <div class="icon">
            </div>
            <div class="text">
              <div class="title">
              您已成功领取卡密！
              </div>
              <div class="desc">
                请勿将卡密泄露给任何人，并尽快使用。<br/>长按即可复制卡号、密码。
              </div>
            </div>
          </div>
          <div class="btn">
            <a href="javascript:;">查看使用说明</a>
          </div>
        </div>
        <div class="cards">
          <div class="title">
            以下是全部卡密信息
          </div>
          <div class="item" v-for="item in cards">
            <div class="iNo">
              <label for="iNo" class="lb">卡号：</label>
              <span class="input"@focus="select">{{item.CardNumber}}</span>
              <!-- <input type="text" class="input" name="iNo" :value="item.CardNumber"> -->
            </div>
            <div class="iPass">
              <label for="iPass" class="lb">密码：</label>
              <span class="input"@focus="select">{{item.key}}</span>
              <!-- <input type="text" class="input" name="iPass" @focus="select" :value="item.key"> -->
            </div>
          </div>
        </div>
        <div class="loading-container" v-show="!cards.length">
          <Loading></Loading>
        </div>
      </div>
    </div>
    <div class="malert">
      <div class="dialog-cover" style="display: none;"></div>
      <div class="alertC" style="display: none;">
        <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
          <div class="text">
            <div class="dous"></div>
            <div class="oper"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
  <script src="static/js/home.js" charset="utf-8"></script>
</body>

</html>
